<!-- 客户分析 -->
<template>
  <div class="main">
    <div class="main_top">
      <el-scrollbar height="100%">
        <el-form-item label="选择客户群">
          <el-select v-model="MySignIn" placeholder="选择客户群" @change="SelectDataById()">
            <el-option label="所有客户" value="all" />
            <el-option v-for="item in SelectCustomerBase" :label="item.clientBaseName" :value="item.clientBaseId" />
          </el-select>
        </el-form-item>
        <dl class="isflve" v-if="MySignIn != 'all'">
          <dd>风险等级：</dd>
          <dd>{{ riskGrade }}</dd>
        </dl>
        <ScreenPerson ref="RefScreenPerson" />

      </el-scrollbar>
    </div>
    <div class="main_bottom">
      <PureTableBar title="" class="list_hei">
        <template v-slot="{ size, checkList }">
          <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
            :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="300"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }">
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>

  <ReDialog :width="380" :height="180" :models="Visible" @Closes="HideVisible(RefCustomerGroup)">
    <template #header>
      <h2 style="text-align: center;">创建客户群</h2>
    </template>
    <template #main>
      <div class="h-full flex justify-center items-center">
        <el-form ref="RefCustomerGroup" :model="CustomerGroup" label-width="130px" :inline="true">
          <el-form-item label="客户群名称" prop="name" :rules="[
            {
              required: true,
              message: '请输入客户群名称',
              trigger: 'blur',
            }]">
            <el-input v-model.trim="CustomerGroup.name" class="w-[90%]" />
          </el-form-item>
          <el-form-item label="客户群风险等级" prop="SignIn" :rules="[
            {
              required: true,
              message: '请选择风险等级',
              trigger: 'blur',
            }]">
            <el-select v-model="CustomerGroup.SignIn" placeholder="请选择风险等级" class="w-[90%]">
              <el-option label="保守型" value="保守型" />
              <el-option label="稳健型" value="稳健型" />
              <el-option label="平衡型" value="平衡型" />
              <el-option label="成长型" value="成长型" />
              <el-option label="进取型" value="进取型" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" :loading="BtnLoading" @click="getCustomerGroup(RefCustomerGroup)">确定</el-button>
      <el-button @click="HideVisible(RefCustomerGroup)"> 取消 </el-button>
    </template>
  </ReDialog>
</template>

<script lang="ts" setup>
import { PureTableBar } from "@/components/RePureTableBar";
import ScreenPerson from "@/components/Screen-Person/index.vue";
import { useCustomerAnalysis } from "./hook/CustomerAnalysis";
const {
  dataList,
  columns,
  loading,
  Visible,
  MySignIn,
  riskGrade,
  pagination,
  BtnLoading,
  CustomerGroup,
  RefScreenPerson,
  RefCustomerGroup,
  SelectCustomerBase,
  HideVisible,
  SelectDataById,
  handleSizeChange,
  getCustomerGroup,
  handleCurrentChange
} = useCustomerAnalysis();
</script>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.main {
  height: 100%;
}

.main_top {
  height: 49.5%;
  padding: 10px;
  border: 1px solid #dcdfe6;
}

.main_bottom {
  top: 1%;
  height: 49.5%;
  position: relative;
  border: 1px solid #dcdfe6;
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.list_hei) {
  .flex {
    display: none;
  }
}

.pure-table {
  height: calc(100% - 10px);
}

:deep(.list_hei.p-2) {
  padding: 0;
}

:deep(.list_hei.mt-6) {
  margin: 0;
}

.isflve {
  background-color: #eee;
  padding-left: 20px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding-top: 15px;
}
</style>
